<template>
  <div  v-loading="loading">
    <!-- 表格 -->
    <el-table
        :data="pageTicket"
        style="width: 100%">
      <el-table-column
          prop="userId"
          label="序号"
          type="index"
          width="50px"
      >
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="years"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="role"
          label="角色">
      </el-table-column>
      <el-table-column
          prop="height"
          label="身高(cm)">
      </el-table-column>
      <el-table-column
          prop="weight"
          label="体重(kg)">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="status"
          label="登录状态">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="labor"
          label="劳动等级"
      >
      </el-table-column>
      <el-table-column
          label="操作"
          width="250px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              style="margin-left: 8px;"
              @click="editDialogEdit(scope.row.id)">编辑
          </el-button>
          <el-button
              size="mini"
              style="margin-top: 10px;margin-left: 8px;"
              @click="handleDelete(scope.row.id)">删除
          </el-button>
          <el-button
              size="mini"
              style="margin-top: 10px;margin-left: -2px;"
              @click="handleSelect(scope.row.username)">查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-row>
      <el-col style="text-align:right">
        <el-pagination
            style="padding-top: 15px"
            @size-change="findSizeChange"
            @current-change="findPage"
            :current-page.sync="pageNow"
            :page-sizes="[2,4,6,8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
        title="编辑信息"
        :visible.sync="editRule.editDialog"
        width="40%"
        center
    >
      <el-form
          label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="formDate.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formDate.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formDate.years"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formDate.role">
            <el-option
            v-for="(item, index) in formDate.roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="formDate.gender">
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="劳动等级">
          <el-select v-model="formDate.labor">
            <el-option label="乏活动" value="1"></el-option>
            <el-option label="轻度活动" value="2"></el-option>
            <el-option label="中度活动" value="3"></el-option>
            <el-option label="重度活动" value="4"></el-option>
            <el-option label="非常重度活动" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身高(cm)">
          <el-input v-model="formDate.height"></el-input>
        </el-form-item>
        <el-form-item label="体重(kg)">
          <el-input v-model="formDate.weight"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button @click="editRuleCancle">取 消</el-button>
    <el-button type="primary" @click="submitEditRule()"
    >确 定</el-button
    >
  </span>
    </el-dialog>


    <!-- 用户详情 -->
    <el-dialog
        title="用户详情"
        :visible.sync="editRule.editDialogs"
        width="80%"
        center
    >
      <div class="block" style="margin-bottom: 10px">
        <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="findByTime">查找</el-button>
      </div>
      <el-table
          :data="tableData"
          show-summary
          style="width: 100%">
        <el-table-column
            prop="dishName"
            label="菜品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="dishType"
            label="菜品类型">
        </el-table-column>
        <el-table-column
            prop="fat"
            sortable
            label="脂肪(克)">
        </el-table-column>
        <el-table-column
            prop="carbohydrates"
            sortable
            label="碳水化合物(克)">
        </el-table-column>
        <el-table-column
            prop="protein"
            sortable
            label="蛋白质(克)">
        </el-table-column>
        <el-table-column
            prop="heat"
            sortable
            label="热量(千卡)">
        </el-table-column>
        <el-table-column
            prop="time"
            sortable
            label="记录时间">
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 55px;">
        <el-date-picker
            v-model="value2"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
        <el-button @click="submit" style="margin-top: 20px;">确认提交</el-button>
      </div>
      <div id="orderline" style="width: 90%;height:500px;margin-left: 50px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/radar');

export default {
  data() {
    return {
      //每页显示的条数
      size: 4,
      //总条数
      total: 0,
      //当前页码
      pageNow: 1,
      //分页后的当前页数据
      pageTicket: [],
      //编辑规则
      editRule: {
        editDialog: false, //弹窗
        editDialogs: false
      },
      tableData: [{}],
      formDate: {},
      loading : true,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      pickdata: {
        startTime: '',
        endTime: '',
      },
      xAxisData: [],
      seriesData: [],
      energys: []
    }
  },
  methods: {
    findAll(page = 1, size = 4) {
      request.get("user/findUserPage", {
            params: {
              pageNow: page,
              pageSize: size
            }
          }
      ).then(response => {
        this.pageTicket = response.data.data.list;
        this.total = response.data.data.total;
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
//用来处理每页显示记录发生变化的方法
    findSizeChange(size) {
      //将val赋值给size
      this.size = size;
      //重新去后台查询数据
      this.findAll(this.pageNow, this.size)
    },
    //当前页码改变的时候
    findPage() {
      this.findAll(this.pageNow, this.size)
    },
    handleDelete(row) {
      request.delete('user/deleteUser/' + row)
          .then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.findAll()
          }).catch(error => {
        console.log(error)
      })
    },
    handleEdit() {

    },
//获取编辑详情
    editDialogEdit(scope) {
      request.get('user/findById/' + scope)
          .then(res => {
            this.formDate = res.data.data
            console.log(this.formDate.roles)
            this.editRule.editDialog = true;
          }).catch(error => {
        console.log(error)
      })
    },
    //取消按钮点击方法
    editRuleCancle() {
      this.editRule.editDialog = false;
    },
    // 图片上传接口
    customUpload(file) {
      const formData = new FormData();
      console.log(file)
      formData.append('file', file.file);
      request.post('dish/upload', formData)
          .then(response => {
            console.log('成功')
          })
          .catch(error => {
            // 处理上传失败的逻辑
          });
    },
    // 编辑确认按钮点击方法
    submitEditRule() {
      request.put('user/updateUser', this.formDate)
          .then(res => {
            this.editRule.editDialog = false;
            this.findAll()
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          }).catch(error => {
        console.log(error)
      })
    },
    submitAddDish() {
      request.post('dish/addDishAndMake', this.addDishDate)
          .then(res => {
          }).catch(error => {
        console.log(error)
      })
    },
    handleSelect(username) {
      this.editRule.editDialogs = true;
      this.tableData = ''
      localStorage.setItem('username1', username)
    },
    findByTime() {
      this.pickdata.startTime = this.value2[0]
      this.pickdata.endTime = this.value2[1]
      request.get('dish/findByTime', {
        params: {
          startTime: this.pickdata.startTime,
          endTime: this.pickdata.endTime,
          username: localStorage.getItem('username1')
        }
      })
          .then(res => {
            this.tableData = res.data
          }).catch(error => {
        console.log(error)
      })
    },
    getOrderLine() {
      let myChart = Echarts.init(document.getElementById('orderline'))
      myChart.setOption(
          {
            title: {
              text: '查看每日摄入详情'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['身体每日所需能量', '每日摄入能量']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.seriesData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '每日摄入能量',
                type: 'line',
                stack: 'Total',
                data: this.xAxisData
              },
              {
                name: '身体每日所需能量',
                type: 'line',
                // stack: 'Total',
                data: this.energys
              },
            ]
          }
      )
    },
    submit() {
      console.log(localStorage.getItem('username1'))
      request.get('dish/findDishByTime', {
        params: {
          startTime: this.pickdata.startTime,
          endTime: this.pickdata.endTime,
          username: localStorage.getItem('username1'),
          energy: localStorage.getItem('energy')
        }
      })
          .then(res => {
            this.xAxisData = res.data.number
            this.seriesData = res.data.sum
            this.energys = res.data.mag
            this.getOrderLine()
          }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted() {
    this.findAll(this.pageNow, this.size)
  },
}

</script>

<style scoped>
.container {
  width: 1160px;
  margin: 0 auto;
}

.upload-demo {
  margin-left: 30px;
  margin-bottom: 30px;
}

.custom-button {
  margin-top: 10px;
}

</style>
